<template>
  <div class="about">
    <my-header>许愿墙</my-header>
    <my-input v-model="dream"></my-input>
    <select-color @send:color="getColor" :col="color"></select-color>
    <button :disabled="disabled" @click="addDream">{{text}}</button>
    <div class="dream-box">
      <div class="dream-detail" v-for="(item, i) in dreams" :key="item.id" :style="{
        background: item.color,
        left: item.posX,
        top: item.posY
      }" @touchstart="touchstart(i, $event)" @touchmove="touchmove" @touchend="touchend" >
          <span class="del" @click="del(i)">X</span>
          <span @click="edit(item, i)">{{item.dream}}</span>
      </div>
    </div>
  </div>
</template>
<script>
import myHeader from '@/components/myHeader'
import myInput from '@/components/myInput'
import selectColor from '@/components/selectColor'
export default {
    components: {
      myHeader,
      myInput,
      selectColor
    },
    data() {
      return {
        text: '再想想',
        disabled: true,
        dream: '',
        color: '',
        dreams: [],
        posX: 0,
        posY: 0,
        i: 0,
        editInd: 0,
        isEdit: false // 记录是否是编辑功能
      }
    },
    created() {
      this.dreams = JSON.parse(localStorage.getItem('dreams')) || []
    },
    methods: {

      // 拖拽逻辑
      touchstart(i, e) {
        this.posX = e.touches[0].pageX - parseFloat(this.dreams[i].posX) 
        this.posY = e.touches[0].pageY - parseFloat(this.dreams[i].posY) 
        this.i = i
      },

      touchmove(e) {
        let left = e.touches[0].pageX - this.posX
        let top = e.touches[0].pageY - this.posY
        this.dreams[this.i].posX = left + 'px'
        this.dreams[this.i].posY = top + 'px'
      },

      touchend() {
        localStorage.setItem('dreams', JSON.stringify(this.dreams))
      },
      // 删除梦想
      del(i) {
        this.dreams.splice(i, 1)
        localStorage.setItem('dreams', JSON.stringify(this.dreams))
      },
      addDream() {
        if(this.text == '修改') {
          this.dreams[this.editInd].color = this.color
          this.dreams[this.editInd].dream = this.dream
        } else {
          let obj = {
            dream: this.dream,
            posX: Math.random()*255 + 'px',
            posY: Math.random()*247 + 300 + 'px',
            id: new Date().getTime(),
            color: this.color
          }
          this.dreams.push(obj)
        }
        localStorage.setItem('dreams', JSON.stringify(this.dreams))
        this.dream = ''
        this.color = ''
        
      },

      getColor(color) {
        this.color = color
      },


      // 编辑梦想
      edit(item, i) {
        this.dream = item.dream
        this.color = item.color
        // this.text = '修改'
        this.isEdit = true
        this.editInd = i
      }
    },


    watch: {
      dream(to) {
        if(to && this.color) {
          if(this.isEdit) {
             this.text = '修改'
          } else {
            this.text = '许愿'
          }
          this.disabled = false
          
        } else {
          this.disabled = true
          this.text = '再想想'
        }
      },

      color(to) {
         if(to && this.dream) {
          if(this.isEdit) {
             this.text = '修改'
          } else {
            this.text = '许愿'
          }
          this.disabled = false
        } else {
          this.disabled = true
          this.text = '再想想'
        }
      }
    }
}
</script>
<style scoped lang="scss">
  .about {
    text-align: center;
    height: 100%;
  }

  button {
    padding: 6px 40px;
    border-radius: 10px;
    border: none;
    outline: none;
    background-color: yellowgreen;
    margin-top: 20px;
    font-size: 20px;
  }

  button[disabled] {
    background-color: #ccc;
  }
  .dream-box {
    width: 100%;
    height: calc(100% - 300px);
  }
  .dream-detail {
    position: absolute;
    width: 120px;
    height: 120px;
    color: orangered;
    span {
      text-align: center;
      line-height: 80px;
    }
    .del {
      position: absolute;
      top: 0;
      right: 0;
      width: 20px;
      height: 20px;
      background-color: #fff;
      border: 1px solid #555;
      text-align: center;
      line-height: 20px;
    }
  }
</style>
